<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="dist/css/swiper.min.css">
    <link rel="stylesheet" href="dist/css/main.css">
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container swiper-container-v">
        <p class="music"><audio id="audioid" src="dist/mp3/ww.mp3" preload="auto" loop></audio></p>
        <div class="swiper-wrapper">
            <div class="swiper-slide s1">
                <div style="width: 100%; height: 100%;">
                    <p class="lay1-p1"><img src="dist/images/icon4.jpg"></p>
                    <p class="lay1-p2">小哥哥，你好呀<br>重新遇见你，世界是不是很小</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div style="width: 100%; height: 100%;">
                    <p class="lay2-p1"><img src="dist/images/icon1.jpg"></p>
                    <p class="lay2-p2">和你一起喝咖啡，你为我点了红枣茶，我们第一次拍了合照，搞怪开心</p>
                    <p class="lay2-p3 clearfix">
                        <img class="fl" src="dist/images/icon3.jpg">
                        <img class="fr" src="dist/images/icon3.jpg">
                    </p>
                    <p class="lay2-p4">
                        <img src="dist/images/icon2.jpg">
                    </p>
                    <p class="lay2-p5">我们重新第一次约会<br>我第一次来到北大，第一次滑冰</p>
                </div>
            </div>
            <div class="swiper-slide s2">
                <div style="width: 100%; height: 100%;">
                    <p class="lay3-p1">《十六味》面馆，我拉着你要吃面</p>
                    <p class="lay3-p2">你在认真的看着最强大脑，我很吃错<br>你不看我，我只能偷拍你</p>
                    <p class="lay3-p3">
                        <img src="dist/images/icon5.jpg">
                    </p>
                    <p class="lay3-p4">不知道我在不在你的眼里，而你在我的心里</p>
                    <p class="lay3-p5"><img src="dist/images/icon6.jpg"></p>
                </div>
            </div>
            <div class="swiper-slide s3">
                <div style="width: 100%; height: 100%;">
                    <div class="clearfix">
                        <p class="lay4-p1 fl"><img src="dist/images/icon7.jpg"></p>
                        <p class="lay4-p2 fl"><img src="dist/images/icon8.jpg"></p>
                    </div>
                    <div class="clearfix">
                        <p class="lay4-p3 fl">你一直不让我喝冷饮，点了杯养乐多冷饮，被你直接扔掉，很霸道，但是知道你为我好，所以很生气也很开心</p>
                        <p class="lay4-p4 fl">和你要了好几次照片，终于大方的给了一张，只是想在相册里多一些你的存在</p>
                    </div>  
                </div>
            </div>
            <div class="swiper-slide s4">
                <div style="width: 100%; height: 100%;">
                    <p class="lay5-p1">太平盛世里，因你而兵荒马乱</p>
                    <p class="lay5-p2"><img src="dist/images/icon10.jpg"></p>
                    <p class="lay5-p3">因彼此的存在，生活可以更幸福</p>
                </div>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-v"></div>
    </div>

    <!-- Swiper JS -->
    <script src="dist/js/swiper.min.js"></script>
    <script src="dist/js/mediaQuery.min.js"></script>
    <script src="dist/js/zepto.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });
    //音乐    
    $(".music").click(function() {
        if (document.getElementById('audioid').paused) { //判读是否播放
    　　  document.getElementById('audioid').play();
          $(".music").addClass('on');
    　　}else{
            document.getElementById('audioid').pause();
            $(".music").removeClass('on');
        }
        
    });
    //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
    if (!document.getElementById('audioid').paused) { //判读是否播放
　　      $(".music").addClass('on');
　　}else{
        $(".music").removeClass('on');
    }
    document.getElementById('audioid').play(); 
    //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('audioid').play(); 
        if (!document.getElementById('audioid').paused) { //判读是否播放
    　　  $(".music").addClass('on');
    　　}else{
            $(".music").removeClass('on');
        }
    }, false); 
    //音频处理 end
    </script>
</body>
</html>